<template>
  <div
    class="card-items"
    style="display: flex; flex-direction: column; margin-bottom: 10rpx"
  >
    <div style="margin: 10rpx; display: flex; justify-content: space-between">
      <div style="font-weight: bold; margin: 20rpx">相册</div>
      <div style="margin: 20rpx">
        <span style="font-size: small; color: #34495e"
          >共{{ num }}张照片<van-icon name="arrow" color="#34495e"
        /></span>
      </div>
    </div>
    <div style="margin: 20rpx">
      <van-grid :column-num="3" :border="false">
        <van-grid-item
          use-slot
          v-for="(item, index) in imgList"
          :key="index"
          :value="item.img_url"
        >
          <image
            style="width: 30%; height: 150rpx; border-radius: 10rpx; margin: 1%"
            :src="item.img_url"
          />
        </van-grid-item>
      </van-grid>
    </div>
    <van-empty
      v-if="imgList.length == 0"
      customStyle=""
      description="试试在日记中插入图片吧"
    />
  </div>
</template>

<script>
import VanEmpty from "wxcomponents/vant/empty/index";

export default {
  props: ["imgList", "num"],
  data() {
    return {};
  },
  methods: {
    goToDiary() {
      uni.navigateTo({
        url: "showAlbum",
      });
    },
  },
  components:{
    VanEmpty
  }
};
</script>
<style scoped>
.card-items {
  width: 730rpx;
  background-color: white;

  margin-top: 10rpx;
  border-radius: 20rpx;
}
</style>